@mixin text-line($value) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $value;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  word-break: break-all;
}

.supplier-card {
  height: 360px;
  padding-top: 20px;
  overflow: hidden;
  .card-content {
    height: 296px;
    position: relative;
    overflow: auto;
    padding: 0 12px 0 20px;
    margin-right: 4px;
    .type-line {
      margin: 0 0 18px 0;
      .img-box {
        position: relative;
        top: -1px;
        width: 16px;
        height: 16px;
        display: inline-block;
        .img {
          width: 16px;
          height: 16px;
          user-select: none;
        }
      }
      .order-sub-text {
        font-size: 14px;
        color: #4E5B71;
        line-height: 20px;
        margin-left: 8px;
      }
    }
    .third-consumption-content {
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      .vendor-item {
        padding: 12px 20px;
        margin-bottom: 16px;
        width: 100%;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        height: 64px;
        background: #F7F8FA;
        border-radius: 4px;
        transition: all ease 0.2s;
        .content-box {
          display: flex;
          justify-content: left;
        }

        .triangle-box {
          margin-left: 10px;
          flex-shrink: 0;
          line-height: 40px;
          .order-text {
            font-size: 12px;
            color: #B5C0CE;
            text-align: right;
          }
          .right-angle {
            margin-left: 4px;
            transition: all ease 0.2s;
            font-size: 12px;
            color: #CDD7EC;
          }
        }

        .img-box {
          flex-shrink: 0;
          height: auto;
          width: 40px;
          margin-right: 16px;
          .img {
            height: auto;
            width: 40px;
          }
        }
        .vendor-name {
          font-size: 16px;
          color: #4E5B71;
          line-height: 40px;
          @include text-line(1);
        }
        &:hover {
          background: #F2F6FF;
          .triangle-box .right-angle {
            color: #4B8DFF;
          }
        }
      }
    }
    /* 设置滚动条的样式 */
    &::-webkit-scrollbar {
      width: 4px;
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background: #D7DCE6;
    }
  }
  .title-and-all {
    display: flex;
    justify-content: space-between;
    padding: 0 20px 8px 20px;
    .view-all {
      cursor: pointer;
      font-size: 14px;
      color: #1890FF;
      letter-spacing: 0;
      text-align: right;
      line-height: 20px;
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
